@charset "UTF-8";
@font-face {
  font-family: 'HuXiaoBo-NanShen';
  src: url(./HuXiaoBo-NanShen.otf);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Source Han Sans CN;
}

.production-board {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #000E14;
  overflow: hidden;
  /** 标题区域 */
  /** 中间区域 */
  /** 底部区域 */
}

.production-board .board-top {
  width: 100%;
  height: 4rem;
  display: flex;
  margin-bottom: 1.75rem;
  position: relative;
  background: url(../img/main-title.png) no-repeat;
  background-size: cover;
}

.production-board .board-top-title {
  color: #FFF;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 4rem;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.production-board .board-top .info {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  line-height: 4rem;
  left: 8.56rem;
  top: 0;
}

.production-board .board-top .info-time {
  color: #19D7FC;
  font-weight: 700;
  margin-right: 0.75rem;
}

.production-board .board-top .info-line-y {
  width: 0.0625rem;
  height: 1rem;
  background: #34586A;
}

.production-board .board-top .info-date {
  color: #19D7FC;
  font-size: 0.75rem;
  margin-left: 0.75rem;
}

.production-board .board-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
  /** 左侧数量区 */
  /** 订单列表区 */
}

.production-board .board-main-left {
  display: flex;
  flex-direction: column;
}

.production-board .board-main-left .box {
  width: 13.25rem;
  padding: 1.75rem 1rem;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: url(../img/count-box.png) no-repeat;
  background-size: cover;
}

.production-board .board-main-left .box .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.production-board .board-main-left .box .text-label {
  color: #B4C0CC;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.375rem;
}

.production-board .board-main-left .box .text-count {
  font-size: 2rem;
  font-family: HuXiaoBo-NanShen;
  line-height: 3rem;
}

.production-board .board-main-left .box .text-count-yellow {
  color: #FAD851;
}

.production-board .board-main-left .box .text-count-green {
  color: #49FBA5;
}

.production-board .board-main-left .box .text-count-cyan {
  color: #27DCFF;
}

.production-board .board-main-left .box .icon {
  width: 5rem;
  height: 5rem;
}

.production-board .board-main-right {
  flex: 1;
}

.production-board .board-main-right .list {
  width: 100%;
}

.production-board .board-main-right .list-tr {
  height: 3.375rem;
}

.production-board .board-main-right .list-tr > td {
  background: rgba(6, 40, 51, 0.7);
  padding: 0.94rem 1rem;
  text-align: center;
}

.production-board .board-main-right .list-tr-head {
  height: 3.75rem;
}

.production-board .board-main-right .list-tr-head > td {
  padding: 1.12rem 1rem;
  text-align: center;
}

.production-board .board-main-right .list-linear-x {
  background: linear-gradient(90deg, #084868 0%, #062C34 100%) !important;
}

.production-board .board-main-right .list-linear-y {
  background: url(../img/thead.png) no-repeat;
  background-position: bottom;
  background-size: cover;
}

.production-board .board-main-right .list-line-x > td {
  border-bottom: solid #34586A 1px;
}

.production-board .board-main-right .list-line-y {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(174, 231, 255, 0) 0.01%, rgba(120, 211, 250, 0.72) 52.08%, rgba(166, 229, 255, 0) 100%);
}

.production-board .board-main-right .list-bg {
  background: rgba(6, 40, 51, 0.7);
}

.production-board .board-main-right .step {
  padding: 0 !important;
}

.production-board .board-main-right .step-area {
  display: flex;
  width: 100%;
}

.production-board .board-main-right .step-main {
  flex: 1;
  display: flex;
  line-height: 3.25rem;
}

.production-board .board-main-right .step .tag {
  width: 2.5rem;
  height: 1.625rem;
  margin: 0 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5rem;
}

.production-board .board-main-right .step .tag-green {
  border-radius: 6px;
  background: linear-gradient(180deg, #6CC384 0%, #299748 100%);
}

.production-board .board-main-right .step .tag-red {
  border-radius: 6px;
  background: linear-gradient(180deg, #DA6771 0%, #C84852 100%);
}

.production-board .board-main-right .step .tag-area {
  display: flex;
  height: 3rem;
  line-height: 3rem;
  justify-content: center;
  align-items: center;
  background: #000E14;
}

.production-board .board-main-right .step-item {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  position: relative;
  padding: 0 1rem;
  display: flex;
  align-items: center;
}

.production-board .board-main-right .step-item span:last-child {
  margin-left: 0.5rem;
}

.production-board .board-main-right .step-item-white {
  color: #FFF;
}

.production-board .board-main-right .step-item-yellow {
  color: #FAD851;
}

.production-board .board-main-right .step-item::after {
  content: '';
  width: 1px;
  height: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(174, 231, 255, 0) 0.01%, rgba(120, 211, 250, 0.72) 52.08%, rgba(166, 229, 255, 0) 100%);
  position: absolute;
  top: 0;
  right: 0;
}

.production-board .board-main-right .text {
  color: #B4C0CC;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.production-board .board-main-right .text-red {
  color: #F24957;
}

.production-board .board-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.production-board .board-footer .title {
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.875rem;
  padding: 0.62rem 1rem;
  position: relative;
}

.production-board .board-footer-left {
  display: flex;
  flex-direction: column;
  margin-right: 1.5rem;
  flex: 1094;
}

.production-board .board-footer-left .title {
  background: url(../img/left-title.png) no-repeat;
  background-size: cover;
}

.production-board .board-footer-left .title::after {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  background: url(../img/left-title.png) no-repeat;
  background-position: bottom;
  background-size: cover;
  left: 0;
  bottom: 0;
}

.production-board .board-footer-right {
  display: flex;
  flex-direction: column;
  flex: 754;
}

.production-board .board-footer-right .title {
  background: url(../img/right-title.png) no-repeat;
  background-size: cover;
}

.production-board .board-footer-right .title::after {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  background: url(../img/right-title.png) no-repeat;
  background-position: bottom;
  background-size: cover;
  left: 0;
  bottom: 0;
}

.production-board .board-footer .content {
  height: 17.75rem;
  /** 轮播数据区 */
  /** 订单汇总区 */
}

.production-board .board-footer .content-left {
  position: relative;
  min-width: 1080px;
  background: url(../img/left-content.png) no-repeat;
  background-size: cover;
  background-position: left bottom;
  overflow-y: hidden;
}

.production-board .board-footer .content-left .content {
  padding: 1.25rem 0.94rem;
}

.production-board .board-footer .content-left .scroll-area {
  height: calc(17.75rem - 2.5rem - 2.5rem);
  overflow-y: scroll;
}

.production-board .board-footer .content-left .scroll-area::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.production-board .board-footer .content-left .list {
  width: 100%;
  padding: 0 0.94rem;
}

.production-board .board-footer .content-left .list-tr {
  height: 2.5rem;
  padding: 0.6rem 1rem;
}

.production-board .board-footer .content-left .list-tr > td {
  padding: 0.56rem 1rem;
  text-align: center;
}

.production-board .board-footer .content-left .list-tr > td:nth-child(1) {
  width: 10%;
}

.production-board .board-footer .content-left .list-tr > td:nth-child(3) {
  width: 15%;
}

.production-board .board-footer .content-left .list-tr > td:nth-child(4) {
  width: 15%;
}

.production-board .board-footer .content-left .list-tr > td:nth-child(5) {
  width: 20%;
}

.production-board .board-footer .content-left .list-title {
  background: rgba(39, 220, 255, 0.2);
  color: #B4C0CC;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3125rem;
}

.production-board .board-footer .content-left .list-title > td {
  padding: 0.63rem 1rem;
}

.production-board .board-footer .content-left .list .text {
  color: #FFF;
  font-size: 0.875rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 1.3125rem;
}

.production-board .board-footer .content-left .list .text-cyan {
  color: #27DCFF;
}

.production-board .board-footer .content-left .list .text-red {
  color: #F24957;
}

.production-board .board-footer .content-left::after {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  background: url(../img/left-content.png) no-repeat;
  background-position: right bottom;
  background-size: cover;
  right: 0;
  bottom: 0;
}

.production-board .board-footer .content-right {
  background: url(../img/right-content.png) no-repeat;
  background-size: cover;
  background-position: left bottom;
  display: flex;
  flex-direction: row;
}

.production-board .board-footer .content-right .content {
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.production-board .board-footer .content-right .chart {
  flex: 1;
}

.production-board .board-footer .content-right .total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
}

.production-board .board-footer .content-right .total-icon {
  width: 6.625rem;
  height: 3.875rem;
  background: url(../img/total-icon.png) no-repeat;
  background-size: cover;
}

.production-board .board-footer .content-right .total-item {
  margin-bottom: 1rem;
}

.production-board .board-footer .content-right .total-item .title, .production-board .board-footer .content-right .total-item .main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.production-board .board-footer .content-right .total-item .title-area {
  margin-bottom: 0.7rem;
  width: 13rem;
  background: url(../img/total-title.png) no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.production-board .board-footer .content-right .total-item .title-area > .text {
  padding: 0 0.75rem;
}

.production-board .board-footer .content-right .total-item .text {
  color: #FFF;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.production-board .board-footer .content-right .total-item .text-label {
  color: #B4C0CC;
}

.production-board .board-footer .content-right .total-item .text-num-white {
  font-size: 1.5rem;
  font-weight: 700;
}

.production-board .board-footer .content-right .total-item .text-num-green {
  color: #49FBA5;
  font-size: 1.125rem;
}

.production-board .board-footer .content-right .total-item .text-num-red {
  color: #F24957;
  font-size: 1.125rem;
}

.production-board .board-footer .content-right::after {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  background: url(../img/right-content.png) no-repeat;
  background-position: right bottom;
  background-size: cover;
  right: 0;
  bottom: 0;
}

.production-board .board-footer-line {
  height: 4px;
  background: url(../img/footer-line.png) no-repeat;
  background-size: cover;
  margin: 0.9rem 1.5rem;
}

@media screen and (max-width: 1800px) {
  html, body {
    font-size: 13px;
  }
  .production-board .board-top .info {
    left: 7.56rem;
  }
  .production-board .board-footer .content-left {
    min-width: calc(1050px * 0.8);
  }
}
